<template>
	<div class="screen-page-component screen-page" ref="page" :style="{fontSize}">
		<div class="page-head">
			<div class="head-left">
				<img src="@/assets/imgs/logo.png" alt="Logo">
			</div>
			<div class="title">{{title}}</div>
			<div class="head-right">{{timeStr}}</div>
		</div>
		<div class="page-container">
			<slot></slot>
		</div>
	</div>
</template>

<script setup>
import { onBeforeUnmount, onMounted, ref, getCurrentInstance, nextTick } from 'vue';
import { eleResize } from '@/assets/js/utils'
import dayjs from 'dayjs'

const props = defineProps({
	title:{
		type:String,
		default:'大屏标题'
	}
})
const emits = defineEmits(['resizeFont'])

let resizeFlag = false;

const instance = getCurrentInstance()
const pageloading = ref(false)
const fontSize = ref('50px')
const timeStr = ref('')
let $page = null;
let timerInterval = null;

const parseCurrentTime = function(){
	timeStr.value = dayjs().format('YYYY-MM-DD HH:mm:ss')
}

const createTimerInterval = function(){
	timerInterval = window.setInterval(parseCurrentTime,1000)
}

const destoryTimerInterval = function(){
	try{
		window.clearInterval(timerInterval)
		timerInterval = null
	}catch(e){
		//TODO handle the exception
	}
}

const resizeFunction  = function(){
	resizeFlag = false;
	setPageFontSize()
	if (resizeFlag) {
		nextTick(()=>{
			emits('resizeFont')
		})
	}
}

const setPageFontSize = function(){
	let _w = $page.offsetWidth;
	if (_w) {
		let newVal = (_w/20)+'px'
		if (newVal!==fontSize.value){
			fontSize.value = newVal
			resizeFlag = true
		}
	}
}

const createEleResize = function(){
	$page = instance.refs.page
	eleResize.on($page,resizeFunction)
}

const destroyEleResize = function(){
	try{
		eleResize.off($page,resizeFunction);
	}catch(e){
		//TODO handle the exception
	}
}

onMounted(()=>{
	window.setTimeout(()=>{
		parseCurrentTime()
		createTimerInterval()
		createEleResize()
		resizeFunction()
	},100)
})
onBeforeUnmount(()=>{
	destoryTimerInterval()
	destroyEleResize()
})
</script>

<style scoped lang="scss">
.screen-page-component{
	display: flex;
	flex-direction: column;
	min-width: 800px;
	overflow: hidden;
	position: relative;
	.page-head{
		flex-shrink: 0;
		height: 1.05em;
		background: url(@/assets/imgs/head_bg.png);
		background-size: auto;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: relative;
		font-size: inherit;
		.head-left,.head-right{
			position: absolute;
			top:0;
			height: 65%;
		}
		.head-left{
			left: 0;
			padding-left: .2em;
			display: flex;
			align-items: flex-start;
			padding-top: .1em;
			img{
				height: 80%;
				width: auto;
			}
		}
		.head-right{
			right: 0;
			font-size: .3em;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			font-family: electronicFont;
			padding-right: .2em;
			color: rgba(255,255,255,.7);
		}
		.title{
			color: #399bff;
			font-size: .45em;
			font-weight: 400;
			height: 82%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.page-container{
		flex-grow: 1;
		height: 1px;
	}
}
</style>